<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        天气很好
        <p>不凡学院</p>
    </div>

    <script>
        // box 的内容是什么  (p标签)
        // p标签的内容 什么(不凡学院)


        // 开始标签 和 结束标签之间的  内容


        // innerText  和  innerHTML 

        var box = document.getElementsByClassName('box')[0];
        var p = document.getElementsByTagName('p')[0];

        // 获取内容

        console.log(box.innerText); // 内部的 文本 内容
        // 天气很好

        // 不凡学院

        console.log(box.innerHTML); // 内部 结构(html)

        // 天气很好
        // <p>不凡学院</p>
    


        // 设置内容
        box.innerText = '你好'; // 修改box 里边的 内容(之前的内容就被覆盖了)
        box.innerText = '<p>你好</p>'; // 标签字符串(innerText  不会解析标签)


        box.innerHTML = '你好';
        box.innerHTML = '<p>你好</p>'; // innerHTML 会解析标签


        // 注意一点 :    属性修改  都会把 之前的 属性值 覆盖掉
    </script>
</body>
</html>